<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="captainln-box">
		<view class="captainln-from flex">
			<text class="title">申请入驻</text>
			<!-- 提交状态 -->
			<view class="status-box flex" v-if="submitStatus&&submitStatus.status!=-1">
				<view class="name-box flex-row-center" v-if="submitStatus.status==2">
					<up-icon name="clock" color="#F9AE3D" size="28rpx"></up-icon>
					<text class="name ing">入驻正在审核中</text>
				</view>
				<view class="name-box flex-row-center" v-else-if="submitStatus.status==0">
					<up-icon name="checkmark-circle" color="#5AC725" size="28rpx"></up-icon>
					<text class="name sucss">入驻审核通过</text>
				</view>
				<template v-else-if="submitStatus.status==1">
					<view class="name-box flex-row-center">
						<up-icon name="close-circle" color="#F56C6C" size="28rpx"></up-icon>
						<text class="name err">审核已禁用</text>
					</view>
					<text class="reason" v-if="submitStatus.reason">原因：{{submitStatus.reason}}</text>
				</template>
				<template v-else-if="submitStatus.status==3">
					<view class="name-box flex-row-center">
						<up-icon name="close-circle" color="#F56C6C" size="28rpx"></up-icon>
						<text class="name err">审核未通过！</text>
					</view>
					<text class="reason" v-if="submitStatus.reason">原因：{{submitStatus.reason}}</text>
				</template>
			</view>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">商家名称</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入内容" v-model="storeInfo.company_name"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">商家地址</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入内容" v-model="storeInfo.address">
						<template #suffix>
							<up-icon @click="chooseLocationTap" name="map-fill" color="#DEDEDE" size="42rpx"></up-icon>
						</template></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">统一信用代码</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入内容" v-model="storeInfo.credit_code"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">法人姓名</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入内容" v-model="storeInfo.legal_person"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">联系电话</text>
					<up-input border="none" type="number" placeholderClass="placeholderClass" fontSize="26rpx"
						color="#DEDEDE" placeholder="请输入内容" maxlength="11" v-model="storeInfo.phone"></up-input>
				</view>

				<view class="from-item flex-row-center">
					<text class="from-name">法人身份证号</text>
					<up-input maxlength="18" border="none" type='idcard' placeholderClass="placeholderClass"
						fontSize="26rpx" color="#DEDEDE" placeholder="请输入内容" v-model="storeInfo.idcard"></up-input>
				</view>
				<view class="from-item flex-row-center " style="flex-direction: column;">
					<text class="from-name flex-start">法人身份证</text>
					<view class="upload-content flex-row-center w100">
						<view class="upload-item flex-center" style="margin-right: 24rpx;">
							<up-upload :fileList="fileData.fileList1" @afterRead="afterReadTwo($event,1)"
								@delete="deletePicTwo" name="fileList1" :maxCount="1" width="240rpx" height="132rpx">
								<image src="@/page_user/static/upload_bg.png" style="width: 240rpx;height: 132rpx;"
									mode="">
								</image>
							</up-upload>
							<text class="name">国徽</text>
						</view>
						<view class="upload-item flex-center">
							<up-upload :fileList="fileData.fileList2" @afterRead="afterReadTwo($event,1)"
								@delete="deletePicTwo" name="fileList2" :maxCount="1" width="240rpx" height="132rpx">
								<image src="@/page_user/static/upload_bg.png" style="width: 240rpx;height: 132rpx;"
									mode="">
								</image>
							</up-upload>
							<text class="name">人像</text>
						</view>
					</view>
				</view>
				<view class="from-item flex-row-center ">
					<text class="from-name flex-start">营业执照</text>
					<view class="upload-item flex-center" style="margin-right: 24rpx;">
						<up-upload :fileList="fileData.licenceList" @afterRead="afterReadTwo($event,1)"
							@delete="deletePicTwo" name="licenceList" :maxCount="1" width="240rpx" height="132rpx">
							<!-- 	<image src="@/page_user/static/upload_bg.png" style="width: 240rpx;height: 132rpx;" mode="">
							</image> -->
							<view class="upload-box flex-center">
								<up-icon name="camera" color="#999999" size="70rpx"></up-icon>
								<text class='text'>营业执照</text>
							</view>
						</up-upload>
					</view>
				</view>
				<view class="from-item flex">
					<text class="from-name flex-start" style="margin-bottom: 20rpx;">商铺头像</text>
					<view style="margin-top: 24rpx;">
						<up-upload @delete="deletePic" :fileList="fileData.fileList4" @afterRead="afterReadTwo"
							name="fileList4" :maxCount="1" width="120rpx" height="120rpx">
							<view class="upload-box-three flex-center">
								<up-icon name="camera" color="#999999" size="52rpx"></up-icon>
								<text class='text'>添加照片</text>
							</view>
						</up-upload>
					</view>
				</view>
				<view class="from-item flex" style="flex-direction: column;">
					<text class="from-name flex-start" style="margin-bottom: 20rpx;">商铺简介</text>
					<!--  -->
					<up-textarea border="none" placeholderClass="placeholderClass" v-model="storeInfo.description"
						class="" placeholder="请输入内容" count></up-textarea>
					<view style="margin-top: 24rpx;">
						<up-upload @delete="deletePic" :fileList="fileData.fileList3" @afterRead="afterRead"
							name="fileList3" multiple :maxCount="9" width="200rpx" height="200rpx">
							<view class="upload-box-two flex-center">
								<up-icon name="camera" color="#999999" size="70rpx"></up-icon>
								<text class='text'>添加照片</text>
							</view>
						</up-upload>
					</view>
				</view>
			</view>
			<!-- 协议 -->
			<!-- <view class="agreement-box flex-center">
				<up-checkbox labelColor="#999999" shape="circle" size="28rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
					@change="changeChecked" name="agree" :checked="checked">
				</up-checkbox>
				<view class="content flex-row-center">
					<text class="agreement-name" @click="toProtocol(1)">《入驻协议》</text>
				</view>
			</view> -->
			<!-- 提交 -->
			<view class="submit-box flex-center">
				<!-- disabled="submitStatus&&submitStatus.status==1" -->
				<up-button v-if="submitStatus&&submitStatus.status==2" :disabled="true"
					:customStyle="{'color':'#186059','height':'84rpx'}" text="正在审核" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				<up-button v-else-if="submitStatus&&submitStatus.status==0" @click="toCaptain"
					:customStyle="{'color':'#186059','height':'84rpx'}" text="前往商家中心" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
				<up-button v-else-if="submitStatus&&submitStatus.status!=1"
					:customStyle="{'color':'#186059','height':'84rpx'}" @click="submitApply" text="立即提交入驻"
					loadingText="提交中" :loading="loadingState" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	//在需要用到的界面导入
	import {
		addWatermark
	} from '@/utils/watermark.js';

	const submitStatus = reactive({
		status: -1,
		reason: ''
	});
	const cavansInfo = reactive({
		width: 0,
		height: 0
	})
	const userStore = userInfoStore();
	const checked = ref(false);
	const rules = {
		company_name: {
			required: true,
			msg: '请输入商铺名称'
		},
		legal_person: {
			required: true,
			msg: '请输入法人姓名'
		},
		description: {
			required: true,
			msg: '请输入商铺描述'
		},
		phone: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		credit_code: {
			required: true,
			msg: '请输入商铺名称'
		},
		address: {
			required: true,
			msg: '请选择商铺地址'
		},
		idcard: {
			required: true,
			len: 18,
			// reg: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
			msg: '请输入正确的身份证号码'
		},
	};
	const loadingState = ref(false);
	const fileData = reactive({
		fileList1: [], //身份证正面
		fileList2: [], //身份证背面
		fileList3: [], //轮播图
		fileList4: [], //头像
		licenceList: [] //营业执照
	});
	const fileList = ref([]);
	const storeInfo = reactive({
		company_name: '', //商铺名称
		address: '', //地址
		lat: '', //纬度
		lon: '', //经度
		licence: '', //营业执照
		credit_code: '', //统一信用代码
		legal_person: '', //法人姓名
		phone: '', //联系电话
		cardFront: '', //身份证正面（国徽）
		cardBack: '', //身份证正面（人像）
		idcard: '', //身份证号码
		description: '', //描述
	});
	onLoad(() => {
		getApplyInfo()
	})
	const toCaptain = () => {
		uni.navigateBack();
	};
	const afterRead = async (event) => { //上传图片
		let lists = [].concat(event.file);
		//使用
		let fileListLen = fileData[event.name].length;
		lists.map(async (item) => {
			fileData[event.name].push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await $Api.uploadFile.uploadFilePromise(lists[i].url);
			let item = fileData[event.name][fileListLen];
			if (result.code == '1') {
				fileData[event.name].splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: result.data.fullurl,
				});
			} else {
				fileData[event.name].splice(fileListLen, 1, {
					...item,
					status: 'failed',
					message: '上传失败',
				});
			}
			fileListLen++;
		}
	}
	const afterReadTwo = async (event, type) => { //上传图片 type==1添加水印上传
		if (event && event.file) {
			let filePath = event.file.url;
			fileData[event.name] = [{
				...event,
				url: filePath,
				status: 'uploading',
				message: '上传中',
			}]
			if (type == 1) {
				try {
					filePath = await addWatermark(event.file.url); //获取图片大小
				} catch (e) {
					console.log('错误', e);
					uni.$u.toast('图片上传失败，请重试');
					fileData[event.name] = [{
						...event,
						url: filePath,
						status: 'failed',
						message: '上传失败',
					}]
					return false;
				}
			}
			// console.log('filePath', filePath);
			const result = await $Api.uploadFile.uploadFilePromise(filePath);
			if (result.code == 1) {
				fileData[event.name] = [{
					...event,
					url: result.data.fullurl,
					status: 'success',
					message: '上传成功',
				}]
			} else {
				fileData[event.name] = [{
					...event,
					url: filePath,
					status: 'failed',
					message: '上传失败',
				}]
			}
		}
	}
	const deletePicTwo = (event) => {
		fileData[event.name] = [];
	}
	const deletePic = (event) => { //删除照片
		fileList.value.splice(event.index, 1);
	}
	const getApplyInfo = async () => { //获取队长入驻信息
		uni.showLoading({
			title: '加载中'
		})
		const res = await $Api.store.getMerchantApplyDetail();
		if (res.code == 1) {
			submitStatus.status = res.data.status;
			if (res.data.status == 0) { //通过
				userStore.getUserInfo();
			}
			submitStatus.reason = res.data.reason;
			setTimeout(() => {
				uni.hideLoading();
			}, 600)
		} else {
			uni.hideLoading();
			uni.$u.toast(res.msg)
		}
	}

	const submitApply = async () => { //提交申请
		if (loadingState.value) return
		const validate = validateForm(storeInfo, rules); //验证
		if (!validate.status) return
		if (fileData.fileList1.length == 0 || fileData.fileList1[0].status != 'success') {
			uni.$u.toast('请上传身份证正面');
			return
		}
		if (fileData.fileList2.length == 0 || fileData.fileList2[0].status != 'success') {
			uni.$u.toast('请上传身份证反面');
			return
		}
		if (fileData.fileList3.length == 0) {
			uni.$u.toast('请上传商铺轮播图');
			return
		}
		if (fileData.fileList4.length == 0 || fileData.fileList4[0].status != 'success') {
			uni.$u.toast('请上传商铺头像');
			return
		}
		if (fileData.licenceList.length == 0 || fileData.licenceList[0].status != 'success') {
			uni.$u.toast('请上传营业执照');
			return
		}
		// if (!checked.value) {
		// 	uni.$u.toast('请勾选协议');
		// 	return
		// }
		let imageList = []
		fileData.fileList3.forEach(val => {
			if (val.status == 'success') {
				imageList.push(val.url)
			}
		})
		let imageStr = imageList.join(',' || '');
		if (imageStr == '') {
			uni.$u.toast('请上传商铺轮播图');
			return
		}
		loadingState.value = true;
		const res = await $Api.store.merchantJoinIn({
			company_name: storeInfo.company_name, //商铺名称
			address: storeInfo.address, //地址
			business_license_image: fileData.licenceList[0].url, //营业执照
			credit_code: storeInfo.credit_code, //统一信用代码
			legal_person: storeInfo.legal_person, //法人姓名
			id_card_front_image: fileData.fileList1[0].url, //身份证正面（国徽）
			id_card_back_image: fileData.fileList2[0].url, //身份证正面（人像）
			id_card: storeInfo.idcard, //身份证号码
			description: storeInfo.description, //描述
			phone: storeInfo.phone,
			banner_image: imageStr, //轮播图
			icon: fileData.fileList4[0].url
		});
		if (res.code == '1') {
			uni.showToast({
				title: '提交成功'
			})
			setTimeout(() => {
				loadingState.value = false;
				uni.navigateBack();
			}, 1000)
		} else {
			loadingState.value = false;
			uni.$u.toast(res.msg);
		}
	}
	const chooseLocationTap = async () => { //选择地理位置
		uni.showLoading({
			title: '加载中'
		})
		chooseLocation('', '', true).then((res) => {
			uni.hideLoading();
			if (res) {
				storeInfo.address = res.address + (res.name ? res.name : '');
				storeInfo.lat = res.latitude;
				storeInfo.lon = res.longitude;
			}
		}).catch(() => {
			uni.hideLoading();
			uni.$u.toast('获取位置失败');
		})
	}
	const changeChecked = (e) => {
		checked.value = e;
	};
	const toProtocol = (type) => {
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style lang="scss" scoped>
	.flex-start {
		align-self: flex-start;
	}

	.box-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: -1;
		height: 100vh;
	}

	.captainln-box {
		padding: 40rpx 32rpx;
		box-sizing: border-box;

		.captainln-from {
			width: 100%;
			box-sizing: border-box;
			width: 678rpx;
			// height: 856rpx;	
			border: 2rpx solid #3E6764;
			border-radius: 24rpx;
			padding: 26rpx 32rpx;
			flex-direction: column;
			align-items: center;

			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #E2E4E4;
			}


		}
	}

	.status-box {
		width: 100%;
		flex-direction: column;
		margin-top: 24rpx;

		.name {
			margin-left: 12rpx;
			color: #E2E4E4;
			font-size: 30rpx;
		}

		.err {
			color: #F56C6C;
		}

		.sucss {
			color: #5AC725;
		}

		.ing {
			color: #F9AE3D;
		}

		.reason {
			font-size: 28rpx;
			color: #E2E4E4;
			margin-top: 12rpx;
		}
	}

	.from-box {
		margin-top: 20rpx;
		width: 100%;

		.from-item {
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			background: #283B3C;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-top: 16rpx;

			.from-name {
				display: block;
				width: 152rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				// text-align: right;
				margin-right: 38rpx;
			}



			.upload-content {
				justify-content: space-between;
				margin-top: 24rpx;
			}

			.upload-item {
				flex-direction: column;

				.name {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}

			.up-textarea-box {
				color: #fff;
			}

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

		}

		.upload-box {
			width: 240rpx;
			height: 132rpx;
			border-radius: 8rpx;
			// background-color: #36393B;
			flex-direction: column;
			border: 2rpx solid #999999;

			.text {
				font-weight: 500;
				font-size: 24rpx;
				margin-top: 16rpx;
				color: rgba(255, 255, 255, 0.3);
			}
		}

	}

	.upload-box-two {
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx;
		border: 2rpx solid #999999;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 16rpx;
			color: #999999;
		}
	}

	.upload-box-three {
		width: 120rpx;
		height: 120rpx;
		border-radius: 14rpx;
		border: 2rpx solid #999999;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 6rpx;
			color: #999999;
		}
	}

	.submit-box {
		width: 336rpx;
		margin-top: 48rpx;
	}

	.agreement-box {
		width: 100%;
		justify-content: center;
		margin-top: 32rpx;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>
<style>
	.u-textarea__count,
	.u-textarea.data-v-b6c174a6 {
		padding: 0 !important;
		background-color: transparent !important;
	}

	textarea {
		color: #DEDEDE !important;
		/* 将字体颜色修改为深灰色 */
	}

	.u-search__content__input {
		background: transparent !important;
	}
</style>